   // 1.鼠标移到show框的时候 遮罩层要显示或者隐藏 
        // 2.鼠标移到show的时候 右侧的放大区域需要显示或者隐藏 
        // 3.让遮罩层跟着鼠标动 
        // 4.限定遮罩层显示的范围 
        // 5.遮罩层显示的位置 和放大区域的位置 要对应上；
        // 6.点击小图片切换按钮

        //面向对象写
        //放大镜类
		function fdj(){
			function Enlarge(showEle, maskEle, boxEle, enlargeEle, picEles) {
			        this.showEle = showEle;
			        this.maskEle = maskEle;
			        this.boxEle = boxEle;
			        this.enlargeEle = enlargeEle;
			        this.picEles = picEles;
			        this.showOrhidden();  //在构造函数里调用 showOrHidden方法
			        this.mousemoveFn();
			        // this.switchPic();
			    }
			
			    //绑定事件-鼠标移入 遮罩层和 放大图都需要显示
			    Enlarge.prototype.showOrhidden = function () {
			        //绑定事件-鼠标移入 遮罩层和 放大图都需要显示
			        this.showEle.onmouseover = () => {
			            this.maskEle.style.display = "block"
			            this.enlargeEle.style.display = "block"
			        }
			        //绑定事件-鼠标移除的时候 遮罩层和放大图隐藏
			        this.showEle.onmouseout = () => {
			            this.maskEle.style.display = "none";
			            this.enlargeEle.style.display = "none";
			        }
			    }
			    //鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
			    Enlarge.prototype.mousemoveFn=function(){
			        this.showEle.onmousemove=(e)=> {
			        // var e=e||window.event
			        let event = e || window.event
			        //先计算出鼠标在盒子内的坐标
			        let x = e.clientX - this.boxEle.offsetLeft - this.maskEle.offsetWidth / 2;
			        let y = e.clientY - this.boxEle.offsetTop - this.maskEle.offsetHeight / 2;
			        // console.log(x,y);
			        // 设置遮罩层的left 和top的值
			        //（边界问题）
			
			        if (x <= 0) {
			            x = 0;
			        }
			        if (x >= this.showEle.offsetWidth - this.maskEle.offsetWidth) {
			            x = this.showEle.offsetWidth - this.maskEle.offsetWidth;
			        }
			        if (y <= 0) {
			            y = 0;
			        }
			        if (y >= this.showEle.offsetHeight - this.maskEle.offsetHeight) {
			            y = this.showEle.offsetHeight - this.maskEle.offsetHeight;
			        }
			        //遮罩层的左边距和上边距
			        this.maskEle.style.left = x + "px";
			        this.maskEle.style.top = y + "px";
			        this.showEnlarArae(x, y);
			    }
			    }
			
			
			    Enlarge.prototype.showEnlarArae=function(x, y) {
			        //获取大图的样式
			        let bgSize = getComputedStyle(enlargeEle, null)["background-size"];
			        console.log(bgSize);//获取背景大小 800px 800px
			
			        let arr = bgSize.split(" ");//用空格符隔开
			        console.log(arr);
			        let bigwidth = parseInt(arr[0]);
			        let bigheight = parseInt(arr[1]);
			        console.log(bigwidth, bigheight);
			        // x/showEle.offsetWidth = ?/大图的宽度 ？  x是小图的左边距
			        let bigLeft = x / this.showEle.offsetWidth * bigwidth;
			        let bigTop = y / this.showEle.offsetHeight * bigheight;
			
			        this.enlargeEle.style.backgroundPosition = `-${bigLeft}px -${bigTop}px`;
			    }
			
			
			    // 获取小图片
			    Enlarge.prototype.switchPic = function () {
			    this.picEles.forEach((item, key) => {
			        item.onclick = ()=> {
			            console.log(key);
			            //  改变小图的样式 
			            this.picEles.forEach((pie, k) => {
			                if (key == k) {
			                    // 点击的key值 和当前的k相同了 加上active样式
			                    item.classList.add("active");
			                } else {
			                    pie.classList.remove("active");
			                    // picEles[k]
			                }
			            })
			            //  改变中图的路径 
			            this.showEle.querySelector("img").src = `./imgs/${key + 1}.jpg`;
			            // 改变大图的路径 
			            this.enlargeEle.style.background = `url(./imgs/${key + 1}.big.jpg) no-repeat`;//注意 背景定位和背景大小也被覆盖
			            this.enlargeEle.style.backgroundSize = "800px 800px";//重新设置
			            this.enlargeEle.style.backgroundPosition = "0px 0px";//重新设置
			
			        }
			    })
			}
			    let boxEle = document.querySelector(".box")
			    let showEle = document.querySelector(".show")
			    let maskEle = document.querySelector(".mask")
			    let enlargeEle = document.querySelector(".enlarge")
			    let picEles = document.querySelectorAll(".list p");
			
			    let enlarge=new Enlarge(showEle, maskEle, boxEle, enlargeEle, picEles)
			    enlarge.switchPic();    
				
		}
      